<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <el-form :inline="true" :model="params.entity" style="padding-bottom: 0px;">
          <el-form-item label="存储类型">
            <el-select v-model="params.entity.storageType" placeholder="请输入存储类型" clearable="true">
              <el-option v-for="item in STORAGE_TYPE_LIST" :label="item.label" :value=item.value></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="params.entity.statusFlag" placeholder="请输入状态" clearable="true">
              <el-option v-for="item in YES_NO_LIST" :label="item.text" :value=item.label></el-option>
            </el-select>
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-button type="primary" :icon="Search" @click="searchData">查询</el-button>-->
          <!--          </el-form-item>-->
        </el-form>
      </div>
    </template>
    <el-table v-loading="loading"
              :data="tableData.list" style="width: 100%" height="500"
              :default-sort="{ prop: 'date', order: 'descending' }">
      <!-- <el-table-column fixed type="selection" width="55"/> -->
      <!-- <el-table-column prop="id" label="主键" width="160"
                       show-overflow-tooltip/> -->
      <el-table-column prop="storageTypeName" label="存储类型" show-overflow-tooltip/>
      <el-table-column prop="bucket" label="存储空间（Bucket）" show-overflow-tooltip/>
      <el-table-column prop="accessKey" label="ACCESS_KEY（AK）" show-overflow-tooltip/>
      <el-table-column prop="secretKey" label="SECRET_KEY（SK）" show-overflow-tooltip/>
      <el-table-column prop="endpoint" label="END_POINT（EP）" show-overflow-tooltip/>
      <el-table-column prop="domain" label="空间域名（Domain）" show-overflow-tooltip/>
      <el-table-column prop="stateFlagName" label="状态" show-overflow-tooltip>
        <template #default="scope">
          <el-switch
              v-model="scope.row.statusFlagName"
              inline-prompt
              active-text="是"
              inactive-text="否"
              @change="statusFlagChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300" show-overflow-tooltip>
        <template #header>
          <!-- <el-input v-model="params.search" @keyup.enter.native="searchData" placeholder="搜索角色名称/介绍"/> -->
          <el-button type="primary" :icon="Plus" @click="addDialog">新增</el-button>
        </template>
        <template #default="scope">
          <!--          <el-button link type="danger" :icon="Delete" size="small" @click="showDeleteDialog(scope.row.id)">删除</el-button>-->
          <el-button link type="primary" :icon="Edit" size="small" @click="editDialog(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-model:currentPage="params.current" v-model:page-size="params.size"
                   :page-sizes="[100, 200, 300, 400]" layout="sizes, prev, pager, next" :total="tableData.total"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </el-card>

  <!-- 删除标志 -->
  <el-dialog v-model="deleteDialogVisible" title="提醒" width="30%" align-center>
    <span>确定删除数据？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDeleteDialog">取消</el-button>
        <el-button type="primary" @click="deleteData()">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 新增或者修改页面-->
  <StorageConfigAddOrEdit
      @closeEditDialog="closeEditDialog"
      :addOrEditVisible="addOrEditVisible"
      :ruleForm="ruleForm"
      :addDataType="addDataType"></StorageConfigAddOrEdit>
</template>

<script lang="ts" setup>
import {ElTable, ElMessage, ElMessageBox} from 'element-plus'
import {onMounted, computed, reactive, ref} from 'vue'
import {Params} from "@/apis/model/common/common.interfaces"
import {Delete, Edit, Search, Share, Upload, Plus, Setting} from '@element-plus/icons-vue'
import StorageConfigAddOrEdit from './StorageConfigAddOrEdit.vue'
import {StorageConfig} from '@/apis/model/system/StorageConfigModel'
import {deleteStorageConfigById, storageConfigPage, updateSwitch} from '@/apis/http/system/StorageConfigHttp'
import {STORAGE_TYPE_LIST, YES_NO_LIST} from '@/util/common.util'

// 查询
const params: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {}
})

const ruleForm = ref<StorageConfig>({} as StorageConfig)
// 删除对话框是否展示
const deleteDialogVisible = ref(false)
// AddOrEditVisible
const addOrEditVisible = ref(false)

// table 表数据
const tableData: any = ref({});
// 删除的id
const deleteId = ref<number>(-1)
// 加载数据
const loading = ref(true)
const addDataType = ref('add');

/**
 * 初始化数据
 */
const initList = () => {
  loading.value = true
  storageConfigPage(params).then(res => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      tableData.value = data
    }
    loading.value = false
  })
}

// 切换状态
const statusFlagChange = (row: StorageConfig) => {
  if (row.statusFlagName) {
    ElMessageBox.confirm(
        '存储方式只能一个起作用，确定继续?',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
        .then(() => {
          const param = {id: row.id, statusFlag: row.statusFlagName === true ? 1 : 0} as StorageConfig;
          updateSwitch(param).then(res => {
            ElMessage({
              type: 'success',
              message: '切换存储类型成功!'
            })
            initList()
          })
        })
        .catch(() => {
          row.statusFlagName = !row.statusFlagName;
        })
  }
}

/**
 * search 查询数据
 */
const searchData = () => {
  initList()
}

/**
 * 每页数据量改变查询数据
 * @param val
 */
const handleSizeChange = (val: number) => {
  params.size = val
  initList()
}

/**
 * 分页查询数据
 * @param val
 */
const handleCurrentChange = (val: number) => {
  params.current = val
  initList()
}

/**
 * 添加弹出
 */
const addDialog = () => {
  addOrEditVisible.value = true
  ruleForm.value = {} as StorageConfig
  ruleForm.value.storageType = 0
  addDataType.value = 'add'
}

//修改弹窗
const editDialog = (row: StorageConfig) => {
  addOrEditVisible.value = true
  ruleForm.value = row
  addDataType.value = 'edit'
}

// 关闭修改弹窗
const closeEditDialog = (e: any) => {
  addOrEditVisible.value = e.addOrEditVisible
  if (e.refushList = true) {
    params.current = 1;
    initList();
  }
}

/**
 * 弹出删除对话框
 */
const showDeleteDialog = (id: number) => {
  deleteId.value = id;
  deleteDialogVisible.value = true
}

const closeDeleteDialog = () => {
  deleteId.value = -1;
  deleteDialogVisible.value = false
}

const deleteData = () => {
  deleteStorageConfigById(deleteId.value).then(res => {
    const code = res.code;
    if (code == 200) {
      ElMessage({
        message: '删除数据成功！',
        type: 'success',
      })
      initList();
    } else {
      ElMessage.error('删除数据失败！');
    }
  })
  closeDeleteDialog();
}

onMounted(() => {
  initList()
})
</script>

<style>
</style>
